<template>
  <!-- 搜索页面 -->
  <div class="search-page">
    <!-- header -->
    <div class="header">
      <!-- 搜索框 -->
      <div class="search">
        <!-- 回退 -->
        <div class="btn-left">
          <van-icon name="arrow-left" color="#fff" @click="$router.go(-1)" />
        </div>
        <!-- 输入框 -->
        <div class="input-right" @keyup.enter="searchKeyWord()">
          <van-icon name="search" size="20" @click="searchKeyWord()" />
          <input type="text" v-model="value" placeholder="输入要搜索的内容" />
          <van-icon name="cross" v-show="delShow" @click="value = ''" />
        </div>
      </div>
    </div>
    <!-- 路由视口 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // keyword 的
      value: "",
    };
  },
  computed: {
    // 搜索框的删除键的显示
    delShow() {
      return this.value.length > 0 ? true : false;
    },
  },
  methods: {
    // 关键字搜索
    searchKeyWord() {
      if (this.value.trim().length >= 1) {
        //
        let searchHistory = JSON.parse(localStorage.searchHistory || "[]");
        //
        searchHistory = [
          this.value,
          ...searchHistory.filter((k) => k != this.value),
        ];
        //
        localStorage.searchHistory = JSON.stringify(searchHistory);
        //
        this.$router.push(`/search/result/${this.value}`);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.search-page {
  position: relative;
  width: 100vw;
  background-color: #fff;
  z-index: 999;
  .header {
    background-color: var(--theme-blue);
    display: flex;
    .search {
      display: flex;
      align-items: center;
      padding: 20px 15px;
      .btn-left {
        margin-right: 12px;
      }
      .input-right {
        background-color: #fff;
        box-sizing: border-box;
        width: 295px;
        height: 36px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        border-radius: 3px;
        input {
          padding: 0;
          width: 267px;
          height: 36px;
          border: none;
          outline: none;
          margin-left: 8px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>